<template>
	<div id="dashboard">
		<keep-alive>
				  <router-view v-if="$route.meta.isKeep"></router-view>
		</keep-alive>
		<router-view v-if="!$route.meta.isKeep"></router-view>
		
		<van-tabbar v-model="active">
			<van-tabbar-item :to="{name:'home'}">
			    <span>首页</span>
			    <template #icon="props">
			      <img :src="props.active ? icon_home.active : icon_home.inactive" />
			    </template>
			</van-tabbar-item>
			<van-tabbar-item :to="{name:'cate'}">
			    <span>分类</span>
			    <template #icon="props">
			      <img :src="props.active ? icon_cate.active : icon_cate.inactive" />
			    </template>
			</van-tabbar-item>
			<van-tabbar-item :to="{name:'cart'}" :badge="goodsnum?goodsnum:''">
			    <span>购物车</span>
			    <template #icon="props">
			      <img :src="props.active ? icon_cart.active : icon_cart.inactive" />
			    </template>
			</van-tabbar-item>
			<van-tabbar-item :to="{name:'mine'}">
			    <span>我的</span>
			    <template #icon="props">
			      <img :src="props.active ? icon_mine.active : icon_mine.inactive" />
			    </template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	import {mapGetters,mapMutations,mapState} from 'vuex'
	import {reqCartApi} from "@/api";
	import {setStorage} from "@/plugins/localStorage";
	
	export default {
		name:'dashbord',
		data(){
			return {
				active:0,
				icon_home:{
				        active: require('@/assets/tabbar/home_selected.png'),
				        inactive: require('@/assets/tabbar/home_default.png'),
				    },
				icon_cate:{
						active: require('@/assets/tabbar/category_selected.png'),
						inactive: require('@/assets/tabbar/category_default.png'),
					},
				icon_cart:{
						active: require('@/assets/tabbar/shoppingcart_selected.png'),
						inactive: require('@/assets/tabbar/shoppingcart_default.png'),
					},
				icon_mine:{
						active: require('@/assets/tabbar/mine_selected.png'),
						inactive: require('@/assets/tabbar/mine_default.png'),
					},
			}
		},
		watch:{
			'$route.path':function(){
				this.active = this.$route.meta.active
			},
		},
		async created() {
			this.active = this.$route.meta.active
			this.autologin()
			
			let {token} = this.isDenglu
			let obj = {}
			let res = await reqCartApi(token)
				let {data} = res.data;
				data.forEach(item=>{
					let {goods_id:id,goods_name:name,small_image,goods_price:price,checked:isChecked,num} = item;
					let shujv = {id,name,small_image,price,num,isChecked}
					obj[id] = shujv
				
			});
			setStorage("shopcart",obj)
			// console.log(this.shopcart)
			// this.shopcart = obj
			this.givegoods()
		},
		methods:{
			...mapMutations(["givegoods","autologin"]),
		},
		computed:{
			...mapState(["isDenglu","shopcart"]),
			...mapGetters(["goodsnum"])
		}
	}
</script>

<style scoped>
	#dashboard{
		position: absolute;
		padding: 50px 0;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: auto;
	}
	/* #dashboard::after{
		content: "";
		display: block;
		height: 50px;
	} */
</style>